<template>
  <div class="page settingEditPage">
    <div class="page-waprrer" style="overflow: hidden">
    <tab class="settingEdit-topTab" active-color="#c7a45b">
      <tab-item selected @on-item-click="onItemClick(1)">全部商品</tab-item>
      <tab-item @on-item-click="onItemClick(2)">已选商品</tab-item>
    </tab>
       <transition name="pageFadeIn" mode="">
         <keep-alive>
           <settingEditAll style="position: absolute" v-if="goodsList.index === 1"></settingEditAll>
           <settingEditSelected style="position: absolute" v-else-if="goodsList.index === 2"></settingEditSelected>
         </keep-alive>
       </transition>
    </div>

  </div>
</template>
<script>
   import settingEditAll from "components/setting-edit-all"
   import settingEditSelected from "components/setting-edit-selected"
   import {Tab, TabItem } from 'vux'
   import {mapGetters, mapMutations} from "vuex";
   import Bus from "common/js/bus";
   import _ from "lodash";

    export default {
        data() {
            return {
               goodsList:{
                 selected:[],
                 unselected:[],
                 goods:[],
                 pages:{
                   goodsPage:1,
                   goodsMaxPage:10,
                   selectedPage:1,
                   selectedMaxPage:10,
                   unselectedPage:1,
                   unselectedMaxPage:10
                 },
                 index:1,
               }
            }
        },
        computed: {
          ...mapGetters(['user_phone','header_filter'])
        },
        methods: {
          onItemClick(index){
              this.goodsList.index = index;
          },
          ...mapMutations({
            "setCommonHeader": "SET_COMMON_HEADER",
            "setCommonLoading":"SET_COMMON_LOADING"
          })
        },
        components: { Tab,TabItem,settingEditAll,settingEditSelected},
        beforeRouteEnter(to, from, next) {
          next(vm => {
            _.delay(() => {
              vm.setCommonHeader(5);
            }, 500);
          })
        },
    }
</script>
<style lang="less">
  .settingEditPage{
    .settingEdit-topTab{
      padding-top: 45px;
      background: #fff;
      z-index: 99;
      position: fixed;
      width: 100%;
    }
  }

  .pageFadeIn-enter-active{
    animation:  fadeIn 0.4s ease-in;
  }

  .pageFadeIn-leave-active{
     animation: fadeOut 0.4s ease-out;
   }

  .vux-popup-dialog{
    z-index: 10086!important;
  }

  .settingEdit-filterBox{
    &-title{
      height: 0.6rem;
      line-height: 0.6rem;
      letter-spacing: 1px;
      font-size: 0.32rem;
    }
    &-box{
      padding: 0.2rem 0.2rem;
      display: flex;
      align-items: center;
      &-left{
        width: 15%;
      }
      &-right{
        width: 85%;
        input{
          width: 90%;
          position: relative;
          left: 2%;
          border: none;
          border-bottom: 1px solid #ccc;
        }
        select{
          width: 91%;
          position: relative;
          left: 1.5%;
          height: 0.5rem;
          border: none;
          border-bottom: 1px solid #ccc;
        }


      }
      justify-content: center;
      .box-button{
        width: 90%;
        height: 0.5rem;
        line-height: .5rem;
        background: #c7a45b;
        color: #fff;
      }
    }
  }
</style>
